<template lang="html">
<div class="home-container">
  <el-row class="container">
    <el-col :span="24" class="header">
            <el-col :span="10" class="logo" :class="'logo-width'">
              <el-col class="logo-title">{{sysName}}</el-col>
            </el-col>
<!--            <el-col :span="4" class="userinfo">-->
<!--                <el-dropdown trigger="hover" @visible-change="userMouse" style="float: right;margin-right: 10px">-->
<!--                    <span class="el-dropdown-link"-->
<!--                          style="display: inline-flex">-->
<!--                      <img :src="sysUserImg" class="userImg">-->
<!--                      <span class="userinfo-inner">{{sysUserName}}</span>-->
<!--                      <span class="user-icon" v-bind:class="userIcon"></span>-->
<!--                    </span>-->
<!--                    <el-dropdown-menu slot="dropdown">-->
<!--&lt;!&ndash;                        <el-dropdown-item @click.native="mineInfo">我的信息</el-dropdown-item>&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-dropdown-item @click.native="setting">设置</el-dropdown-item>&ndash;&gt;-->
<!--                        <el-dropdown-item @click.native="logoutFun">退出登录</el-dropdown-item>-->
<!--                    </el-dropdown-menu>-->
<!--                </el-dropdown>-->
<!--            </el-col>-->
        </el-col>
    <el-col :span="24" class="main">
      <!--导航栏-->
      <aside :class="'menu-expanded'">
        <!--导航菜单-->
       <el-menu :default-active="$route.path" ref="bigmenu" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" unique-opened router>
         <template v-for="(item,index) in $router.options.routes" v-if="!item.hidden && checkContains(item.name)">
           <el-menu-item v-for="child in item.children" @click="addRouter(child, item.path +'/'+ child.path)" :index="item.path +'/'+ child.path" :key="item.path +'/'+ child.path" v-if="!child.hidden && checkContains(child.name)">
             <template slot="title">
               <i :class="item.iconCls"></i>
               <span class="item-name">{{child.title}}</span>
             </template>
           </el-menu-item>
         </template>
         <div @click="logoutFun" class="exit-li">
           <div class="exit">
             <i class="el-icon-my-exit"></i>
             <span class="item-name exit-name">退出登录</span>
           </div>
         </div>
       </el-menu>
     </aside>
      <!--头部按钮-->
      <div class="btn-header">
        <el-col :span="24">
          <el-col :span="6">
            <div class="get-invoice" @click.stop="getInvoice">
              <i class="el-icon-my-getInvoice"></i>
              <div class="btn-invoice">
                <div class="btn-name">获取发票</div>
                <div class="btn-desc">{{recordText}}</div>
              </div>
            </div>
          </el-col>
          <el-col :span="18">
            <div class="user-info">
              <el-col :span="12">
              <div class="vip-info">
                <img :src="sysUserImg" class="userImg" @click="mineInfo">
                <el-col :span="18">
                  <div class="userInfo">
                    <div class="user-vip">
                      <div class="userName">{{sysUserName}}</div>
                      <div class="vip-icon" v-if="vipType == '1'">
                        <i class="el-icon-my-vipIcon1"></i>
                      </div>
                      <div class="vip-icon" v-else>
                        <div class="vip-type">{{vipIconText}}</div>
                        <i class="el-icon-my-vipIcon"></i>
                      </div>
                    </div>
                    <div class="vip">
                      <div class="vip-desc">{{userVip}}</div>
                      <div class="vip-btn" @click="goVip">{{vipBtn}}</div>
                    </div>
                  </div>
                </el-col>
              </div>
              </el-col>
              <el-col :span="12">
                <div class="vip-function">
                  <div class="vip-function-item">
                    <i class="el-icon-my-vip-export"></i>
                    <span class="vip-function-item-name">批量导出</span>
                  </div>
                  <div class="vip-function-item">
                    <i class="el-icon-my-vip-print"></i>
                    <span class="vip-function-item-name">合并打印</span>
                  </div>
                  <div class="vip-function-item">
                    <i class="el-icon-my-vip-screen"></i>
                    <span class="vip-function-item-name">邮件筛选</span>
                  </div>
                  <div class="vip-function-item">
                    <i class="el-icon-my-vip-type"></i>
                    <span class="vip-function-item-name">智能分类</span>
                  </div>
                </div>
              </el-col>
            </div>
          </el-col>
        </el-col>
      </div>
      <!-- 右侧内容区-->
      <section class="content-container">
       <div class="grid-content bg-purple-light">
<!--         <el-row class="nav-tabs">-->
<!--          <el-col :span="24">-->
<!--            <div @click="changeRouter(index)" v-for="(option, index) in arry" class="cus-tab-box" :class="activepath==option.path?'activeTab':''">-->
<!--              <span>{{option.name}}</span>-->
<!--              <span @click.stop="arry.length!=1 && removeTab(index)"><i class="fa fa-times close-icon" aria-hidden="true"></i></span>-->
<!--            </div>-->
<!--          </el-col>-->
<!--         </el-row>-->
         <el-col :span="24" class="content-wrapper">
           <transition name="fade" mode="out-in">
             <router-view ref="childPage" @reloadUser="reloadUser"></router-view>
           </transition>
         </el-col>
       </div>
     </section>
   </el-col>
  </el-row>

  <div class="course" @click="goCourse">
    <el-tooltip content="查看系统功能介绍" placement="top" effect="light">
      <i class="el-icon-question"></i>
    </el-tooltip>
  </div>

  <load ref="load" />
  <operateDialog ref="operate" />

</div>
</template>

<script>
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import * as commonApi from "api/common";
import load from "common/load";
import * as types from "../store/mutation-types";
import userImg from "../assets/img/head.jpg";
import {baseUrl} from 'config/index.js'
import operateDialog from "common/dialog/operate/operate";

export default {
  components: {load, operateDialog},
  data() {
    return {
      userImg: userImg,
      sysName: "发票打印助手",
      sysUserName: "", //用户名称
      sysUserImg: null, //用户头像
      activepath: "", //当前打开的页面路由
      arry: [],
      treeArry: [], //储存当前用户权限能访问的节点
      userIcon: '',
      userVip: '', //用户vip描述
      vipType: '', //用户权限等级
      vipBtn: '',
      vipIconText: '月',
      userId: '',
      recordText: '', //获取记录信息
    };
  },
  created() {
    // this.checkTreeNode(this.treeData);
    // if (JSON.parse(sessionStorage.getItem("tabData"))) {
    //   this.arry = JSON.parse(sessionStorage.getItem("tabData"));
    //   this.activepath = this.$route.path;
    // } else {
    //   let obj = {};
    //   obj.path = this.$route.path;
    //   obj.name = this.$route.name;
    //   this.activepath = this.$route.path;
    //   this.arry.push(obj);
    // }

  },
  computed: {
    ...mapGetters(["username", "password", "treeData"])
  },
  mounted() {
    var user = sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
      this.userId = user.userId
      this.findUserInfo(2, user)
    }
  },
  methods: {
    //退出登录
    logoutFun: function() {
      var _this = this;
      this.$confirm("确认退出吗?", "提示", {
        //type: 'warning'
      })
        .then(() => {
          sessionStorage.removeItem("mailbox");
          sessionStorage.removeItem("record");
          sessionStorage.removeItem("user");
          _this.$router.push("/login");
        })
        .catch(() => {});
    },
    goCourse(){
      let routeUrl =this.$router.resolve({path: '/agreement/5'})
      window.open(routeUrl.href, '_blank');
    },
    reloadUser(){ //刷新头像 昵称等信息 供子路由调取
      var user = sessionStorage.getItem("user");
      user = JSON.parse(user);
      this.findUserInfo(1, user)
    },
    mineInfo(){
      let activePath = this.$route.path
      if (activePath == '/mine/mine'){
        this.$refs['childPage'].jumpPage('first')
      } else {
        this.$router.push({name:'mine', params:{activeName: 'first'}})
      }
    },
    goMailBox(){ //邮箱信息
      let activePath = this.$route.path
      if (activePath == '/mine/mine'){
        this.$refs['childPage'].jumpPage('four')
      } else {
        this.$router.push({name:'mine', params:{activeName: 'four'}})
      }
    },
    goVip(){ //vip
      let activePath = this.$route.path
      if (activePath == '/mine/mine'){
        this.$refs['childPage'].jumpPage('second')
      } else {
        this.$router.push({name:'mine', params:{activeName: 'second'}})
      }

    },
    setting(){
      this.$router.push({name:'mine', params:{activeName: 'third'}})
    },
    findUserInfo(type, user) {
      if (type == 1){
        //请求后台初始化用户信息
        commonApi.findUser (user.userId).then (res => {
          let {data} = res
          if (data.status === 200) {
            user = data.data.user;
            this.initUserInfo(user)
            sessionStorage.setItem("record", JSON.stringify(data.data.record)); // session更新获取记录信息
            this.initUserRecord(data.data.record)
          }
        })
      } else {
        //缓存初始化用户信息
        this.initUserInfo(user)
        var record = sessionStorage.getItem("record")
        if (record != null && record != 'undefined'){
          record = JSON.parse(record)
        }
        this.initUserRecord(record)
      }
    },
    initUserInfo(user){ //初始化用户信息
      //初始化用户基础信息
      this.sysUserName = user.name || "";
      if (user.headImageUrl != null && user.headImageUrl != ''){
        if (this.judeImg(user.headImageUrl)) {
          this.sysUserImg = baseUrl + user.headImageUrl
        } else {
          this.sysUserImg = user.headImageUrl
        }
      } else {
        this.sysUserImg = this.userImg
      }

      //初始化用户会员信息
      this.vipType = user.userType
      switch (user.userType) {
        case "1":
          // 获取单次使用 套餐信息
          this.userVip = "您暂未购买会员"
          this.vipBtn = '开通'
          break
        case "2":
          this.userVip = "使用次数为" + user.useTime + "次"
          this.vipBtn = '开通'
          this.vipIconText = '次'
          break
        case "3": //判断会员是否到期
          let dueTime = this.judgeDateDays (user.dueTime)
          if (dueTime > 0) {
            this.vipBtn = '续费'
            //判断会员是否还有三十天
            if (dueTime > 30) {
              this.userVip = "会员" + user.dueTime + "到期"
            } else {
              this.userVip = "会员" + dueTime + "天后到期"
            }
          } else {
            this.vipBtn = '开通'
            this.userVip = "您的会员已到期"
          }
          this.vipIconText = '月'
          break
      }
    },
    initUserRecord(record){
      if (record != null && record != 'undefined'){
        this.recordText = '上次获取时间 ' + this.convertDateFromString(record.getDate)
      } else {
        this.recordText = '上次获取时间 ' + this.getLastDate()
      }
    },

    // 往tab页添加router
    addRouter(data, path) {
      const obj = Object.assign({}, data);
      obj.path = path;
      let add = true;
      for (let i = 0; i < this.arry.length; i++) {
        if (this.arry[i].path == obj.path) {
          add = false;
        }
      }
      if (add) {
        this.arry.push(obj);
      }
      add = true;
      // sessionStorage.setItem("tabData", JSON.stringify(this.arry));
    },
    // 操作tab
    changeRouter(index) {
      this.$router.push(this.arry[index].path);
    },
    // 检查树结构是否包含当前节点
    checkContains(name) {
      return true;
      // return this.treeArry.includes(name);
    },
    // 遍历后台返回权限树节点数据
    checkTreeNode(tree) {
      for (var i = 0; i < tree.length; i++) {
        this.treeArry.push(tree[i].name)
        if (tree[i].child && tree[i].child.length > 0) {
          this.checkTreeNode(tree[i].child);
        }
      }
    },
    // remove Tab
    removeTab(index) {
      this.arry.splice(index, 1);
      if (index == 0) {
        this.$router.push(this.arry[0].path);
      } else {
        this.$router.push(this.arry[index - 1].path);
      }
      sessionStorage.setItem("tabData", JSON.stringify(this.arry));
    },
    ...mapMutations({
      setTabData: types.SET_TABDATA
    }),
    userMouse(e) {
      if (e){
        this.userIcon = 'user-icon-on'
      } else {
        this.userIcon = ''
      }
    },
    judgeDateDays(dateTime){//判断日期与当前日期的天数差
      // 指定日期和时间
      var EndTime = new Date(dateTime);
      // 当前系统时间
      var NowTime = new Date();
      var t = EndTime.getTime() - NowTime.getTime();
      var d = Math.floor(t / 1000 / 60 / 60 / 24);
      return d;
    },
    judeImg(img){
      if (img.indexOf("http") != -1){ //自身的图片
        return false
      } else {
        return true
      }
    },
    getInvoice(){
      // 获取发票
      const params = {
        userId: this.userId
      }
      commonApi.getNewInvoice(params).then(res => {
        let {data} = res;
        if (data.status === 200) {
          this.$refs.load.showLoad('连接邮箱中')
          setTimeout(this.getInvoiceStatus, 3 * 1000);
        } else if(data.status == '555'){
          this.$refs.operate.showO('添加邮箱信息后才能获取发票，快去添加吧！', '去添加', data.status, 1)
        } else if(data.status == '556'){
          this.$refs.operate.showO('添加邮箱授权码后才能获取发票，快去添加吧！', '去添加', data.status, 1)
        } else if(data.status == '557'){
          this.$refs.operate.showO('充值vip会员后才能获取发票，快去充值吧！', '去充值', data.status, 1)
        } else if(data.status == '558'){
          this.$refs.operate.showO('充值vip会员后才能获取发票，快去充值吧！', '去充值', data.status, 1)
        } else if(data.status == '559'){
          this.$refs.operate.showO('充值vip会员后才能获取发票，快去充值吧！', '去充值', data.status, 1)
        }else {
          this.$msg({text: data.msg, type: 'error'})
        }
      })
    },
    getInvoiceStatus(){ //获取发票状态
      var _this = this
      commonApi.getInvoiceStatus(this.userId).then(res => {
        let {data} = res;
        if (data.status === 200) {
          var newStatus = parseInt(data.data.status);
          if(data.data.result){
            if (newStatus != 4) { //未结束则一直轮询
              setTimeout(_this.getInvoiceStatus, 5 * 1000);
              if (newStatus == 1) {
                this.$refs.load.setLoadText('连接邮箱中')
              } else if (newStatus == 2) {
                this.$refs.load.setLoadText('获取邮件中')
              } else if (newStatus == 3) {
                this.$refs.load.setLoadText('解析邮件中')
              }
            } else {
              let activePath = this.$route.path
              // 刷新列表
              if (activePath == '/invoice/invoiceList'){
                this.$refs['childPage'].pageObj.currentPage = 1
                this.$refs['childPage'].getMailDate()
              }
              if (activePath == 'mail/mailList'){
                this.$refs['childPage'].pageObj.currentPage = 1
                this.$refs['childPage'].getMailDate()
              }
              // 每次获取完更新用户信息
              var user = {userId: this.userId}
              this.findUserInfo(1, user)
              //给出文字提示
              this.$refs.load.loadSucc('共获取'+ data.data.invoice +'封邮件')
              setTimeout(()=>{
                //3s 后关闭加载动画
                this.$refs.load.closeLoad()
              }, 3000)
            }
          } else {
            if (newStatus == 1) {
              this.$refs.load.setErrorText('连接邮箱失败')
            } else if (newStatus == 2) {
              this.$refs.load.setErrorText('获取邮件失败')
            } else if (newStatus == 3) {
              this.$refs.load.setErrorText('解析邮件失败')
            } else if (newStatus == 4) {
              this.$refs.load.setErrorText('保存邮件失败')
            } else {
              this.$refs.load.setErrorText('获取邮件异常')
            }
          }
        }
      })
    },
    //yyyy-MM-dd hh:mm:ss 格式化为 MM-dd hh:mm
    convertDateFromString(dateString) { //输入的时间格式为yyyy-MM-dd hh:mm:ss
      if (dateString) {
        var arr1 = dateString.split(" ");
        var sdate = arr1[0].split('-');
        var stime = arr1[1].split(':');
        var datetime = new Date(sdate[0], sdate[1]-1, sdate[2], stime[0], stime[1], stime[2]);

        var month = datetime.getMonth() + 1;//js从0开始取
        var day = datetime.getDate();
        var hour = datetime.getHours();
        var minutes = datetime.getMinutes();
        if (month < 10) {
          month = "0" + month;
        }
        if (day < 10) {
          day = "0" + day;
        }
        if (hour < 10) {
          hour = "0" + hour;
        }
        if (minutes < 10) {
          minutes = "0" + minutes;
        }
        return month+ '-' + day + ' ' + hour + ':' + minutes;
      }
    },
    //获取三十天前的日期
    getLastDate(){
      //获取当前日期
      var date = new Date();
      //获取30天前得日期
      var lastDate = new Date(date - 1000 * 60 * 60 * 24 * 30);//最后30天可以更改，意义：是获取多少天前的时间
      var lastY = lastDate.getFullYear();
      var lastM = lastDate.getMonth()+1;
      var lastD = lastDate.getDate();
      var LDate = (lastM < 10 ? "0" + lastM : lastM) + "-" + (lastD < 10 ? "0" + lastD : lastD) + ' 00:00';//得到30天前的时间
      return LDate;
    },
  },
};
</script>

<style scoped lang="scss">
@import "../assets/css/them.scss";
:focus{
  outline: none;
}
@keyframes wordsLoop {
  0% {
    transform: translateX(140px);
    -webkit-transform: translateX(140px);
  }
  100% {
    transform: translateX(-350px);
    -webkit-transform: translateX(-350px);
  }
}
@-webkit-keyframes wordsLoop {
  0% {
    transform: translateX(140px);
    -webkit-transform: translateX(140px);
  }
  100% {
    transform: translateX(-350px);
    -webkit-transform: translateX(-350px);
  }
}

@media screen and (max-width: 1200px){
  .home-container{
    background-color: #F5F6FB;
    height: 100%;
    min-height: 340px;
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: url("../assets/img/back-img.png") no-repeat;
      background-size: 100%;
      /*头部标题*/
      .header {
        height: 40px;
        line-height: 40px;
        background: $globalColor;
        color: #fff;
        .logo-width {
          text-align: center;
          width: 150px;
          color: $baseColor;
          .logo-title {
            display: inline-block;
            color: $baseFontColor;
            font-weight: 500;
            line-height: 40px;
            font-size: 18px;
            height: 40px;
          }
        }
        .logo-collapse-width {
          width: 60px;
        }
        .tools {
          padding: 0 23px;
          width: 14px;
          height: 60px;
          line-height: 60px;
          cursor: pointer;
        }
      }
      /*头部以下的内容区*/
      .main {
        display: flex;
        position: absolute;
        top: 40px;
        bottom: 0;
        overflow: hidden;
        min-height: 480px;
        /*左侧导航栏*/
        .menu-expanded {
          flex: 0 0 150px;
          width: 150px;
          .el-menu-vertical-demo{
            width: 70px;
          }
          .el-menu {
            margin: 0 40px;
            border-right: 0;
            border-radius: 100px;
            position: fixed;
            bottom: 58px;
            top: 60px;
            min-height: 450px;
            .el-menu-item:first-child{
              margin-top: 12vh;
            }
            .el-menu-item{
              margin: 2vh 5px;
              border-radius: 50%;
              height: 60px;
              .el-icon-my-invoice {
                background: url("../assets/img/invoice@2x.png") center no-repeat;
                background-size: 20px 20px;
                width: 20px;
                line-height: 2;
              }
              .el-icon-my-invoice:before {
                content: "替";
                visibility: hidden;
              }
              .el-icon-my-mailbox {
                background: url("../assets/img/mail@2x.png") center no-repeat;
                background-size:20px 18px;
                width: 20px;
                line-height: 2;
              }
              .el-icon-my-mailbox:before {
                content: "替";
                visibility: hidden;
              }
              .el-icon-my-mine {
                background: url("../assets/img/mine@2x.png") center no-repeat;
                background-size: 16px 20px;
                width: 16px;
                line-height: 2;
              }
              .el-icon-my-mine:before {
                content: "替";
                visibility: hidden;
              }
              .item-name{
                display: block;
                line-height: 12px;
                font-size: 12px;
                color: #000000;
                position: relative;
                right: 15px;
              }
            }
            .el-menu-item.is-active{
              .el-icon-my-invoice {
                background: url("../assets/img/invoice_on@2x.png") center no-repeat;
                background-size: 18px 18px;
              }
              .el-icon-my-mailbox{
                background: url("../assets/img/mail_on@2x.png") center no-repeat;
                background-size:20px 18px;
              }
              .el-icon-my-mine{
                background: url("../assets/img/mine_on@2x.png") center no-repeat;
                background-size: 16px 20px;
              }
              .item-name{
                color: $globalColor;
              }
            }
          }
          //退出登录
          .exit-li:hover{
            background: #F5F5FB;
          }
          .exit-li{
            position: absolute;
            width: 60px;
            bottom: 20px;
            text-align: center;
            margin: 5vh 5px;
            border-radius: 50%;
            .exit{
              .el-icon-my-exit {
                background: url("../assets/img/exit.png") center no-repeat;
                background-size: 20px;
                width: 20px;
                line-height: 20px;
                margin-top: 10px;
              }
              .el-icon-my-exit:before {
                content: "替";
                visibility: hidden;
              }
              .exit-name{
                display: block;
                font-size: 12px;
                padding-bottom: 10px;
                padding-top: 4px;
              }
            }
          }
          .collapsed {
            width: 60px;
            background: $globalColor;
            .item {
              position: relative;
            }
            .submenu {
              position: absolute;
              top: 0;
              left: 60px;
              z-index: 99999;
              height: auto;
              display: none;
            }
          }
        }

        /*头部按钮*/
        .btn-header{
          position: absolute;
          left: 150px;
          top: 20px;
          float: left;
          width: calc(100% - 170px);
          min-width: 850px;
          .get-invoice{
            display: inline-block;
            width: 230px;
            height: 68px;
            background: $globalColor;
            border-radius:20px;
            cursor: pointer;
            .el-icon-my-getInvoice {
              background: url("../assets/img/getInvoice.png") center no-repeat;
              background-size: 28px;
              width: 28px;
              line-height: 68px;
              margin-left: 20px;
            }
            .el-icon-my-getInvoice:before {
              content: "替";
              visibility: hidden;
            }
            .btn-invoice{
              margin-left: 50px;
              position: absolute;
              top: 0;
              width: 180px;
              overflow: hidden;
              .btn-name{
                margin-left: 20px;
                padding-top: 12px;
                font-size: 18px;
                font-weight:600;
                color: $baseFontColor;
              }
              .btn-desc{
                margin-left: 20px;
                padding-top: 2px;
                font-size: 12px;
                font-weight:400;
                color: $baseFontColor;
                /*animation: 8s wordsLoop linear infinite normal;*/
                /* 强制不换行，不设的话由于内容较多会换行到下方 */
                white-space: nowrap;
              }
            }

          }
          .user-info{
            float: right;
            width: 95%;
            height: 68px;
            background: $globalColor;
            border-radius: 20px;
            margin-left: 50px;
            /*用戶vip信息*/
            .vip-info{
              display: inline-block;
              margin: 5px 20px 5px 30px;
              color: #333333;
              font-size: 14px;
              font-weight: 600;
              width: 100%;
              .userImg {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                margin-right: 10px;
                margin-top: 5px;
                float: left;
              }
              .userInfo{
                margin-left: 15px;
                display: inline-block;
                line-height: 25px;
                font-weight:400;
                font-size: 14px;
                color: $baseFontColor;
                .user-vip{
                  display: flex;
                  margin-bottom: 5px;
                  .userName{
                  }
                  .vip-icon{
                    margin-left: 20px;
                    .vip-type{
                      display: inline-block;
                      position: absolute;
                      margin-left: 24px;
                      margin-top: 3px;
                      font-size:12px;
                      font-weight:400;
                      color: $globalColor;
                    }
                    .el-icon-my-vipIcon{
                      background: url("../assets/img/vip-coin.png") center no-repeat;
                      background-size: 42px;
                      width: 45px;
                      line-height: 2;
                    }
                    .el-icon-my-vipIcon:before {
                      content: "替";
                      visibility: hidden;
                    }
                    .el-icon-my-vipIcon1{
                      background: url("../assets/img/vip-coin1.png") center no-repeat;
                      background-size: 26px 22px;
                      width: 26px;
                      line-height: 2;
                    }
                    .el-icon-my-vipIcon1:before {
                      content: "替";
                      visibility: hidden;
                    }
                  }
                }
                .vip{
                  display: flex;
                  .vip-desc{}
                  .vip-btn{
                    margin-left: 10px;
                    width:50px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border:1px solid #E5BB5F;
                    border-radius:13px;
                    color: #E5BB5F;
                    cursor: pointer;
                  }
                }
              }
            }
            /*vip功能icon*/
            .vip-function{
              height: 68px;
              float: right;
              display: flex;
              .vip-function-item{
                display: inline-block;
                margin: 4px 10px;
                text-align: center;
                background:rgba(255,204,87,0.2);
                border-radius:50%;
                .vip-function-item-name{
                  display: block;
                  font-size:12px;
                  font-weight:400;
                  color:rgba(102,102,102,1);
                  margin-top: 1px;
                }
                .el-icon-my-vip-export{
                  background: url("../assets/img/vip-icon-export.png") center no-repeat;
                  background-size: 18px 20px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-export:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip-print{
                  background: url("../assets/img/vip-icon-print.png") center no-repeat;
                  background-size: 18px 20px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-print:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip-screen{
                  background: url("../assets/img/vip-icon-screen.png") center no-repeat;
                  background-size: 20px 18px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-screen:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip-type{
                  background: url("../assets/img/vip-icon-type.png") center no-repeat;
                  background-size: 20px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-type:before {
                  content: "替";
                  visibility: hidden;
                }
              }
            }
          }
        }

        /*中间内容区*/
        .content-container::-webkit-scrollbar {display:none}
        .content-container {
          flex: 1;
          overflow-y: scroll;
          margin: 115px 20px 58px 0;
          background: $globalColor;
          border-radius: 20px;
          min-width: 850px;
          .nav-tabs {
            font-size: 12px;
            border-bottom: 1px solid #e4e7ed;
            .cus-tab-box {
              display: inline-block;
              margin: 5px 0px 5px 5px;
              padding: 3px 10px;
              border: 1px solid #ccc;
              border-radius: 2px;
              cursor: pointer;
            }
            .activeTab {
              background-color: $baseColor;
              color: #fff;
              border-color: #fff;
            }
            .close-icon {
              transform: rotate(0deg);
              transition: transform 1s;
            }
            .close-icon:hover {
              transform: rotate(180deg);
            }
          }
          .content-wrapper {
            background-color: #fff;
            box-sizing: border-box;
            /*搜索框宽度*/
             /deep/ .form-box {
                min-width: 810px;
              }
          }
        }
      }
    }
    .course{
      position: fixed;
      right: 5px;
      bottom: 78px;
      width: 30px;
      height: 30px;
      text-align: center;
      margin: 0 auto;
      border-radius: 50%;
      cursor: pointer;
      .el-icon-question{
        font-size: 30px;
        color: #90c4fd;
      }
      .el-icon-question:hover{
        font-size: 30px;
        color: #2c91ff;
      }
    }
  }
}
@media screen and (min-width: 1200px) and (max-width: 1600px){
  .home-container{
    background-color: #F5F6FB;
    height: 100%;
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: url("../assets/img/back-img.png") no-repeat;
      background-size: 100%;
      /*头部标题*/
      .header {
        height: 40px;
        line-height: 40px;
        background: $globalColor;
        color: #fff;
        .logo-width {
          text-align: center;
          width: 150px;
          color: $baseColor;
          .logo-title {
            display: inline-block;
            color: $baseFontColor;
            font-weight: 500;
            line-height: 40px;
            font-size: 18px;
            height: 40px;
          }
        }
        .logo-collapse-width {
          width: 60px;
        }
        .tools {
          padding: 0 23px;
          width: 14px;
          height: 60px;
          line-height: 60px;
          cursor: pointer;
        }
      }
      /*头部以下的内容区*/
      .main {
        display: flex;
        position: absolute;
        top: 40px;
        bottom: 0;
        overflow: hidden;
        min-height: 550px;
        /*左侧导航栏*/
        .menu-expanded {
          flex: 0 0 150px;
          width: 150px;
          .el-menu-vertical-demo{
            width: 70px;
          }
          .el-menu {
            margin: 0 40px;
            border-right: 0;
            border-radius: 100px;
            position: fixed;
            bottom: 58px;
            top: 60px;
            min-height: 450px;
            .el-menu-item:first-child{
              margin-top: 12vh;
            }
            .el-menu-item{
              margin: 5vh 5px;
              border-radius: 50%;
              height: 60px;
              .el-icon-my-invoice {
                background: url("../assets/img/invoice@2x.png") center no-repeat;
                background-size: 20px 20px;
                width: 20px;
                line-height: 2;
              }
              .el-icon-my-invoice:before {
                content: "替";
                visibility: hidden;
              }
              .el-icon-my-mailbox {
                background: url("../assets/img/mail@2x.png") center no-repeat;
                background-size:20px 18px;
                width: 20px;
                line-height: 2;
              }
              .el-icon-my-mailbox:before {
                content: "替";
                visibility: hidden;
              }
              .el-icon-my-mine {
                background: url("../assets/img/mine@2x.png") center no-repeat;
                background-size: 16px 20px;
                width: 16px;
                line-height: 2;
              }
              .el-icon-my-mine:before {
                content: "替";
                visibility: hidden;
              }
              .item-name{
                display: block;
                line-height: 12px;
                font-size: 12px;
                color: #000000;
                position: relative;
                right: 15px;
              }
            }
            .el-menu-item.is-active{
              .el-icon-my-invoice {
                background: url("../assets/img/invoice_on@2x.png") center no-repeat;
                background-size: 18px 18px;
              }
              .el-icon-my-mailbox{
                background: url("../assets/img/mail_on@2x.png") center no-repeat;
                background-size:20px 18px;
              }
              .el-icon-my-mine{
                background: url("../assets/img/mine_on@2x.png") center no-repeat;
                background-size: 16px 20px;
              }
              .item-name{
                color: $globalColor;
              }
            }
          }
          //退出登录
          .exit-li:hover{
            background: #F5F5FB;
          }
          .exit-li{
            position: absolute;
            width: 60px;
            bottom: -5px;
            text-align: center;
            margin: 5vh 5px;
            border-radius: 50%;
            .exit{
              .el-icon-my-exit {
                background: url("../assets/img/exit.png") center no-repeat;
                background-size: 20px;
                width: 20px;
                line-height: 20px;
                margin-top: 10px;
              }
              .el-icon-my-exit:before {
                content: "替";
                visibility: hidden;
              }
              .exit-name{
                display: block;
                font-size: 12px;
                padding-bottom: 10px;
                padding-top: 4px;
              }
            }
          }
          .collapsed {
            width: 60px;
            background: $globalColor;
            .item {
              position: relative;
            }
            .submenu {
              position: absolute;
              top: 0;
              left: 60px;
              z-index: 99999;
              height: auto;
              display: none;
            }
          }
        }

        /*头部按钮*/
        .btn-header{
          position: absolute;
          left: 150px;
          top: 20px;
          float: left;
          width: calc(100% - 170px);
          .get-invoice{
            display: inline-block;
            width: 230px;
            height: 68px;
            background: $globalColor;
            border-radius:20px;
            cursor: pointer;
            .el-icon-my-getInvoice {
              background: url("../assets/img/getInvoice.png") center no-repeat;
              background-size: 30px;
              width: 30px;
              line-height: 68px;
              margin-left: 20px;
            }
            .el-icon-my-getInvoice:before {
              content: "替";
              visibility: hidden;
            }
            .btn-invoice{
              margin-left: 50px;
              position: absolute;
              top: 0;
              width: 180px;
              overflow: hidden;
              .btn-name{
                margin-left: 20px;
                padding-top: 12px;
                font-size: 18px;
                font-weight:600;
                color: $baseFontColor;
              }
              .btn-desc{
                margin-left: 20px;
                padding-top: 2px;
                font-size: 12px;
                font-weight:400;
                color: $baseFontColor;
                /*animation: 8s wordsLoop linear infinite normal;*/
                /* 强制不换行，不设的话由于内容较多会换行到下方 */
                white-space: nowrap;
              }
            }

          }
          .user-info{
            float: right;
            width: 95%;
            height: 68px;
            background: $globalColor;
            border-radius: 20px;
            margin-left: 50px;
            /*用戶vip信息*/
            .vip-info{
              display: inline-block;
              margin: 5px 20px 5px 30px;
              color: #333333;
              font-size: 14px;
              font-weight: 600;
              width: 100%;
              .userImg {
                width: 48px;
                height: 48px;
                border-radius: 50%;
                margin-right: 10px;
                margin-top: 5px;
                float: left;
              }
              .userInfo{
                margin-left: 15px;
                display: inline-block;
                line-height: 25px;
                font-weight:400;
                font-size: 14px;
                color: $baseFontColor;
                .user-vip{
                  display: flex;
                  margin-bottom: 5px;
                  .userName{
                  }
                  .vip-icon{
                    margin-left: 20px;
                    .vip-type{
                      display: inline-block;
                      position: absolute;
                      margin-left: 24px;
                      margin-top: 3px;
                      font-size:12px;
                      font-weight:400;
                      color: $globalColor;
                    }
                    .el-icon-my-vipIcon{
                      background: url("../assets/img/vip-coin.png") center no-repeat;
                      background-size: 42px;
                      width: 45px;
                      line-height: 2;
                    }
                    .el-icon-my-vipIcon:before {
                      content: "替";
                      visibility: hidden;
                    }
                    .el-icon-my-vipIcon1{
                      background: url("../assets/img/vip-coin1.png") center no-repeat;
                      background-size: 26px 22px;
                      width: 26px;
                      line-height: 2;
                    }
                    .el-icon-my-vipIcon1:before {
                      content: "替";
                      visibility: hidden;
                    }
                  }
                }
                .vip{
                  display: flex;
                  .vip-desc{}
                  .vip-btn{
                    margin-left: 20px;
                    width:55px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    border:1px solid #E5BB5F;
                    border-radius:13px;
                    color: #E5BB5F;
                    cursor: pointer;
                  }
                }
              }
            }
            /*vip功能icon*/
            .vip-function{
              height: 68px;
              float: right;
              display: flex;
              .vip-function-item{
                display: inline-block;
                margin: 4px 20px;
                text-align: center;
                background:rgba(255,204,87,0.2);
                border-radius:50%;
                .vip-function-item-name{
                  display: block;
                  font-size:12px;
                  font-weight:400;
                  color:rgba(102,102,102,1);
                  margin-top: 2px;
                }
                .el-icon-my-vip-export{
                  background: url("../assets/img/vip-icon-export.png") center no-repeat;
                  background-size: 22px 24px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-export:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip-print{
                  background: url("../assets/img/vip-icon-print.png") center no-repeat;
                  background-size: 22px 24px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-print:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip-screen{
                  background: url("../assets/img/vip-icon-screen.png") center no-repeat;
                  background-size: 24px 18px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-screen:before {
                  content: "替";
                  visibility: hidden;
                }
                .el-icon-my-vip-type{
                  background: url("../assets/img/vip-icon-type.png") center no-repeat;
                  background-size: 22px;
                  width: 60px;
                  line-height: 2;
                  margin-top: 4px;
                }
                .el-icon-my-vip-type:before {
                  content: "替";
                  visibility: hidden;
                }
              }
            }
          }
        }

        /*中间内容区*/
        .content-container::-webkit-scrollbar {display:none}
        .content-container {
          flex: 1;
          overflow-y: scroll;
          margin: 115px 20px 58px 0;
          background: $globalColor;
          border-radius: 20px;
          .nav-tabs {
            font-size: 12px;
            border-bottom: 1px solid #e4e7ed;
            .cus-tab-box {
              display: inline-block;
              margin: 5px 0px 5px 5px;
              padding: 3px 10px;
              border: 1px solid #ccc;
              border-radius: 2px;
              cursor: pointer;
            }
            .activeTab {
              background-color: $baseColor;
              color: #fff;
              border-color: #fff;
            }
            .close-icon {
              transform: rotate(0deg);
              transition: transform 1s;
            }
            .close-icon:hover {
              transform: rotate(180deg);
            }
          }
          .content-wrapper {
            background-color: #fff;
            box-sizing: border-box;
          }
        }
      }
    }
    .course{
      position: fixed;
      right: 5px;
      bottom: 78px;
      width: 30px;
      height: 30px;
      text-align: center;
      margin: 0 auto;
      border-radius: 50%;
      cursor: pointer;
      .el-icon-question{
        font-size: 30px;
        color: #90c4fd;
      }
      .el-icon-question:hover{
        font-size: 30px;
        color: #2c91ff;
      }
    }
  }
}
@media screen and (min-width: 1600px){
  .home-container{
    background-color: #F5F6FB;
    height: 100%;
    .container {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      background: url("../assets/img/back-img.png") no-repeat;
      background-size: 100%;
      /*头部标题*/
      .header {
        height: 60px;
        line-height: 60px;
        background: $globalColor;
        color: #fff;
        .logo {
          height: 60px;
          font-size: 22px;
        }
        .logo-width {
          text-align: center;
          width: 180px;
          color: $baseColor;
          .logo-title {
            display: inline-block;
            color: $baseFontColor;
            font-weight: 500;
            line-height: 60px;
            font-size: 22px;
            width: 180px;
            height: 60px;
          }
        }
        .logo-collapse-width {
          width: 60px;
        }
        .tools {
          padding: 0 23px;
          width: 14px;
          height: 60px;
          line-height: 60px;
          cursor: pointer;
        }
      }
      /*头部以下的内容区*/
      .main {
        display: flex;
        position: absolute;
        top: 60px;
        bottom: 0;
        overflow: hidden;
        min-height: 550px;
        /*左侧导航栏*/
        .menu-expanded {
          flex: 0 0 210px;
          width: 210px;
          .el-menu {
            margin: 0 60px;
            border-right: 0;
            border-radius: 100px;
            position: fixed;
            bottom: 78px;
            top: 100px;
            min-height: 450px;
            .el-menu-item:first-child{
              margin-top: 10vh;
            }
            .el-menu-item{
              margin: 5vh 5px;
              border-radius: 50%;
              .el-icon-my-invoice {
                background: url("../assets/img/invoice@2x.png") center no-repeat;
                background-size: 28px 28px;
                width: 35px;
                line-height: 2;
                margin-top: 30%;
              }
              .el-icon-my-invoice:before {
                content: "替";
                visibility: hidden;
              }
              .el-icon-my-mailbox {
                background: url("../assets/img/mail@2x.png") center no-repeat;
                background-size: 30px 28px;
                width: 35px;
                line-height: 2;
                margin-top: 30%;
              }
              .el-icon-my-mailbox:before {
                content: "替";
                visibility: hidden;
              }
              .el-icon-my-mine {
                background: url("../assets/img/mine@2x.png") center no-repeat;
                background-size: 24px 30px;
                width: 35px;
                line-height: 2;
                margin-top: 30%;
              }
              .el-icon-my-mine:before {
                content: "替";
                visibility: hidden;
              }
              .item-name{
                display: block;
                line-height: 12px;
                font-size: 12px;
                color: #000000;
                position: relative;
                right: 5px;
                margin-top: 8px;
              }
            }
            .el-menu-item.is-active{
              .el-icon-my-invoice {
                background: url("../assets/img/invoice_on@2x.png") center no-repeat;
                background-size: 28px 28px;
              }
              .el-icon-my-mailbox{
                background: url("../assets/img/mail_on@2x.png") center no-repeat;
              }
              .el-icon-my-mine{
                background: url("../assets/img/mine_on@2x.png") center no-repeat;
              }
              .item-name{
                color: $globalColor;
              }
            }
          }
          //退出登录
          .exit-li:hover{
            background: #F5F5FB;
          }
          .exit-li{
            position: absolute;
            width: 80px;
            bottom: -5px;
            text-align: center;
            margin: 5vh 5px;
            border-radius: 50%;
            .exit{
              .el-icon-my-exit {
                background: url("../assets/img/exit.png") center no-repeat;
                background-size: 30px;
                width: 40px;
                line-height: 30px;
                margin-top: 14px;
              }
              .el-icon-my-exit:before {
                content: "替";
                visibility: hidden;
              }
              .exit-name{
                display: block;
                font-size: 12px;
                padding-bottom: 10px;
                padding-top: 8px;
              }
            }
          }
          .collapsed {
            width: 60px;
            background: $globalColor;
            .item {
              position: relative;
            }
            .submenu {
              position: absolute;
              top: 0;
              left: 60px;
              z-index: 99999;
              height: auto;
              display: none;
            }
          }
        }

        /*头部按钮*/
        .btn-header{
          position: absolute;
          left: 210px;
          top: 40px;
          float: left;
          width: calc(100% - 250px);
          /*获取发票按钮*/
          .get-invoice{
            display: inline-block;
            width: 260px;
            height: 88px;
            background: $globalColor;
            border-radius:20px;
            cursor: pointer;
            .el-icon-my-getInvoice {
              background: url("../assets/img/getInvoice.png") center no-repeat;
              background-size: 42px;
              width: 42px;
              line-height: 88px;
              margin-left: 30px;
            }
            .el-icon-my-getInvoice:before {
              content: "替";
              visibility: hidden;
            }
            .btn-invoice{
              margin-left: 65px;
              position: absolute;
              top: 0;
              width: 195px;
              overflow: hidden;
              .btn-name{
                margin-left: 30px;
                padding-top: 18px;
                font-size: 22px;
                font-weight:600;
                color: $baseFontColor;
              }
              .btn-desc{
                margin-left: 30px;
                padding-top: 5px;
                font-size: 12px;
                font-weight:400;
                color: $baseFontColor;
                /*animation: 8s wordsLoop linear infinite normal;*/
                /* 强制不换行，不设的话由于内容较多会换行到下方 */
                white-space: nowrap;
              }
            }

          }
          .user-info{
            float: right;
            width: 95%;
            height: 88px;
            background: $globalColor;
            border-radius:10px;
            margin-left: 50px;
            .vip-info{
              display: inline-block;
              margin: 15px 20px 15px 40px;
              color: #333333;
              font-size: 14px;
              font-weight: 600;
              width: 100%;
              .userImg {
                width: 58px;
                height: 58px;
                border-radius: 50%;
                margin-right: 10px;
                float: left;
              }
              .userInfo{
                margin-left: 15px;
                display: inline-block;
                line-height: 25px;
                font-weight:400;
                font-size: 14px;
                color: $baseFontColor;
                .user-vip{
                  display: flex;
                  margin-bottom: 5px;
                  .userName{
                  }
                  .vip-icon{
                    margin-left: 20px;
                    .vip-type{
                      display: inline-block;
                      position: absolute;
                      margin-left: 24px;
                      margin-top: 3px;
                      font-size:12px;
                      font-weight:400;
                      color: $globalColor;
                    }
                    .el-icon-my-vipIcon{
                      background: url("../assets/img/vip-coin.png") center no-repeat;
                      background-size: 42px;
                      width: 45px;
                      line-height: 2;
                    }
                    .el-icon-my-vipIcon:before {
                      content: "替";
                      visibility: hidden;
                    }
                    .el-icon-my-vipIcon1{
                      background: url("../assets/img/vip-coin1.png") center no-repeat;
                      background-size: 26px 22px;
                      width: 26px;
                      line-height: 2;
                    }
                    .el-icon-my-vipIcon1:before {
                      content: "替";
                      visibility: hidden;
                    }
                  }
                }
                .vip{
                  display: flex;
                  .vip-desc{}
                  .vip-btn{
                    margin-left: 30px;
                    width:72px;
                    height:26px;
                    line-height: 26px;
                    text-align: center;
                    border:1px solid #E5BB5F;
                    border-radius:13px;
                    color: #E5BB5F;
                    cursor: pointer;
                  }
                }
              }
            }
            .vip-function{
              height: 88px;
              float: right;
              display: flex;
              @media screen and (max-width: 1600px) {
                .vip-function-item{
                  display: inline-block;
                  margin: 8px 24px;
                  text-align: center;
                  background:rgba(255,204,87,0.2);
                  border-radius:50%;
                  .vip-function-item-name{
                    display: block;
                    font-size:12px;
                    font-weight:400;
                    color:rgba(102,102,102,1);
                    margin-top: 1px;
                  }
                  .el-icon-my-vip-export{
                    background: url("../assets/img/vip-icon-export.png") center no-repeat;
                    background-size: 28px 30px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-export:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-my-vip-print{
                    background: url("../assets/img/vip-icon-print.png") center no-repeat;
                    background-size: 28px 30px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-print:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-my-vip-screen{
                    background: url("../assets/img/vip-icon-screen.png") center no-repeat;
                    background-size: 32px 24px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-screen:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-my-vip-type{
                    background: url("../assets/img/vip-icon-type.png") center no-repeat;
                    background-size: 30px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-type:before {
                    content: "替";
                    visibility: hidden;
                  }
                }
              }
              @media screen and (min-width: 1600px) {
                .vip-function-item{
                  display: inline-block;
                  margin: 8px 40px;
                  text-align: center;
                  background:rgba(255,204,87,0.2);
                  border-radius:50%;
                  .vip-function-item-name{
                    display: block;
                    font-size:12px;
                    font-weight:400;
                    color:rgba(102,102,102,1);
                    margin-top: 1px;
                  }
                  .el-icon-my-vip-export{
                    background: url("../assets/img/vip-icon-export.png") center no-repeat;
                    background-size: 28px 30px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-export:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-my-vip-print{
                    background: url("../assets/img/vip-icon-print.png") center no-repeat;
                    background-size: 28px 30px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-print:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-my-vip-screen{
                    background: url("../assets/img/vip-icon-screen.png") center no-repeat;
                    background-size: 32px 24px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-screen:before {
                    content: "替";
                    visibility: hidden;
                  }
                  .el-icon-my-vip-type{
                    background: url("../assets/img/vip-icon-type.png") center no-repeat;
                    background-size: 30px;
                    width: 72px;
                    line-height: 3;
                    margin-top: 4px;
                  }
                  .el-icon-my-vip-type:before {
                    content: "替";
                    visibility: hidden;
                  }
                }
              }
            }
          }
        }

        /*中间内容区*/
        .content-container::-webkit-scrollbar {display:none}
        .content-container {
          flex: 1;
          overflow-y: scroll;
          margin: 160px 40px 78px 0;
          background: $globalColor;
          border-radius: 20px;
          .nav-tabs {
            font-size: 12px;
            border-bottom: 1px solid #e4e7ed;
            .cus-tab-box {
              display: inline-block;
              margin: 5px 0px 5px 5px;
              padding: 3px 10px;
              border: 1px solid #ccc;
              border-radius: 2px;
              cursor: pointer;
            }
            .activeTab {
              background-color: $baseColor;
              color: #fff;
              border-color: #fff;
            }
            .close-icon {
              transform: rotate(0deg);
              transition: transform 1s;
            }
            .close-icon:hover {
              transform: rotate(180deg);
            }
          }
          .content-wrapper {
            background-color: #fff;
            box-sizing: border-box;
          }
        }
      }
    }
    .course{
      position: fixed;
      right: 5px;
      bottom: 78px;
      width: 30px;
      height: 30px;
      text-align: center;
      margin: 0 auto;
      border-radius: 50%;
      cursor: pointer;
      .el-icon-question{
        font-size: 30px;
        color: #90c4fd;
      }
      .el-icon-question{
        font-size: 30px;
        color: #90c4fd;
      }
      .el-icon-question:hover{
        font-size: 30px;
        color: #2c91ff;
      }
    }
  }
}



</style>
